<template>
    <div id="bgimg">
        <div class="box-center">
            <div class="box-login">
                <div class="box-login-title">
                    <p>管理后台</p>
                </div>
                <div class="box-login-body">
                    <p> 账号 </p>
                    <el-input class="inputflex" v-model="user.name" placeholder="输入用户名" type="text"/>
                </div>
                <div class="box-login-body" style="margin-bottom: 0px;">
                    <p> 密码 </p>
                    <el-input
                        class="inputflex"
                        v-model="user.passwd"
                        style=""
                        type="password"
                        placeholder="输入密码"
                        show-password
                    />
                </div>
                <div class="box-login-reg" >
                    <el-icon>
                        <i class="el-icon-edit"></i>
                    </el-icon>
                    <p @click="user.operate = user.operate == operateLogin ? operateReg : operateLogin">{{ user.operate }}</p>
                </div>
                <el-button v-if="user.operate==operateReg" @click="signin" type="success" size="large" :loading="isLoading" style="width: 100px;margin-top: 0px;font-size: 20px;">{{ operateLogin }}</el-button>
                <el-button v-else @click="signup" type="success" size="large" :loading="isLoading" style="width: 100px;margin-top: 0px;font-size: 20px;">{{ operateReg }}</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, getCurrentInstance, ref } from 'vue'
import apiUris  from '@/../api/api.js' // 导入api模块
import request from '@/../api/request.js' // 导入request模块
import { ElMessage } from 'element-plus'


const operateLogin = "登录"
const operateReg = "注册"
const user = reactive({
    name: '',
    passwd: '',
    operate: operateReg,
})
const isLoading = ref(false) // 用于控制按钮的 loading 状态

// 获取当前实例
// 在 Vue 3 的 setup() 函数或组合式 API 中，没有 this，所以 Vue 提供了一个函数：getCurrentInstance() 来获取当前组件的实例（类似于 Vue 2 中的 this）
const instance = getCurrentInstance()
// 这是 对象解构赋值（Destructuring Assignment），是 ES6 的语法. 
// instance对象中有一个属性叫做 proxy，它指向当前组件的实例。通过解构赋值，我们可以直接获取这个属性，方便后续使用。
// 等价于 const proxy = instance.proxy
const { proxy } = instance

const signin = async () => {
    // loading一下
    isLoading.value = true
    // 这里可以使用 Element Plus 的 Loading 组件来显示加载状态
    // 将按钮展示的文字替换为loading
    // 当然也可以使用其他方式，比如在按钮上添加一个 loading 属性

    if (user.name === '' || user.passwd === '') {
        alert('用户名或密码不能为空')
        return
    }
    
    // 方法1：使用全局属性
    // baseUrl是一个static对象，里面存储了所有的API地址
    console.log('使用全局属性:', proxy.$apiUris.baseUrl.login)
    // 方法2：直接使用导入的api模块
    const loginUrl = apiUris.baseUrl.login
    console.log('直接导入api模块:', loginUrl)

    // 请求参数
    const params = {
        mobile: user.name,
        password: user.passwd,
    }
    
    try {
        // 发起请求 - 使用 await 等待 Promise 结果
        const req = new request(proxy.$apiUris.baseUrl.login, params)
        // 此处的await配合函数定义处的async关键字使用，代替应该写成 req.doPost().then().catch()的这种写法...
        // 实际上本质是一样的：将请求封装成一个 Promise 对象，使用 await 等待其完成
        // 这样可以让代码更简洁，避免回调地狱
        // await会阻塞主线程吗？不会，await只会阻塞当前async函数的执行，其他代码仍然可以继续执行！！！这保证了页面可以在这个期间执行类似点击事件、滚动等操作
        // 当然，如果你在一个长时间运行的函数中使用了 await，那么这个函数会暂停执行，直到 Promise 被解决（resolved）或拒绝（rejected），但这并不会阻塞整个浏览器的主线程。
        // 这意味着用户界面仍然可以响应用户的操作，比如点击按钮、滚动页面等。
        const response = await req.doPost()
        
        console.log('请求成功:', response)
        if (response.code === 0) {
            // 登录成功
            isLoading.value = false
            ElMessage({message: '登录成功',type: 'success'})
            // 可以在这里进行页面跳转或其他操作
            // 存储token到 localStorage
            localStorage.setItem('token', response.data.token)
            // 这里可以使用 Vue Router 进行页面跳转
            // proxy.$router.push({ name: 'Home' }) // 假设有一个名为 Home 的路由
            // 或者使用 proxy.$router.replace({ name: 'Home' }) 替换当前路由
            // 当然，你也可以使用其他方式，比如在登录成功后直接跳转到首页
            // proxy.$router.push({ path: '/' }) // 跳转到首页
            // 或者使用 proxy.$router.replace({ path: '/' }) 替换当前路由
            proxy.$router.replace({ name: 'home' })
            // 这样可以避免用户在登录后点击浏览器的后退按钮返回到登录页面
        } else {
            // 登录失败
            isLoading.value = false
            ElMessage({message: '登录失败: ' + response.message, type: 'error'})
        }
    } catch (error) {
        // 统一错误处理
        isLoading.value = false
        console.error('请求错误:', error)
        ElMessage({message: '请求错误，请稍后再试:' + (error.message || '未知错误'), type: 'error'})
    }
    
    // 登录逻辑
    console.log('登录:', user.name, user.passwd)
}
const signup = () => {
    if (user.name === '' || user.passwd === '') {
        alert('用户名或密码不能为空')
        return
    }
    // 注册逻辑
    console.log('注册:', user.name, user.passwd)
}
</script>

<style scoped>
</style>